<template>
    <div class="front">
      <div class="top">
       {{title}}
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
      >
        <van-cell
          v-for="(good, key) in goods"
          :key="key"
          class="cell"
        >
          <single-good :good="good" :region="region"></single-good>
        </van-cell>
      </van-list>
      <p v-if="finished" class="no-more">敬请期待更多产品</p>
      <choose-attr></choose-attr>
    </div>
</template>

<script type="text/ecmascript-6">
  import SingleGood from '../../components/sale/singleGood.vue';
  import ChooseAttr from '../../components/sale/chooseAttr.vue';

  export default {
    components: {
      ChooseAttr,
      SingleGood},
    name: 'classGood',

    data () {
      return {
        title: '',
        goods: [],
        region: '',
        loading: false,
        finished: false,
        page: 0
      };
    },
    props: {},
    created () {
    },
    methods: {
      onLoad () {
        let that = this;
        if (this.finished === false) {
          // 异步更新数据
          setTimeout(() => {
            let good = {
              page: this.page,
              size: 8,
              type: 'simple',
              id: this.$route.query.region
            };
            this.$Sale.products(good).then(res => {
              this.page++;
              that.goods = that.goods.concat(res.data);
              if (res.data.length === 0) {
                that.finished = true;
              }
              this.loading = false;
            }, () => {
            });
          }, 500);
        }
      }
    },
    computed: {},
    mounted() {
      this.title = this.$route.query.title;
      this.region = this.$route.query.region;
    },
    watch: {}
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .top
    display flex
    justify-content space-between
    height vw(30)
    line-height vw(30)
    padding 0 vw(15)
    font-size vw(14)
    color #333
  .no-more
    word-vw(12, third-ash);
    flex-center();
    margin-top 10px
    padding-bottom: 5vw;
  .van-cell
    padding 0
    background-color transparent
</style>
